<template>
  <!-- 登录表单组件 -->
  <a-form-model
    ref="ruleForm"
    id="login"
    :model="formData"
    :rules="rules"
    class="login-form animate__animated animate__fadeIn"
  >
    <a-form-item prop="phone">
      <a-input v-model="formData.phone" placeholder="请输入手机号">
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item prop="password">
      <a-input-password
        v-model="formData.password"
        placeholder="请输入密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-checkbox v-model="formData.remenber"> 记住我 </a-checkbox>
      <!-- <a class="login-form-forgot" href=""> 忘记密码？ </a> -->
      <a-button type="primary" @click="handleSubmit" class="login-form-button">
        登录
      </a-button>
    </a-form-item>
  </a-form-model>
</template>

<script>
import requests from "../js/requests.js";
import md5 from "js-md5";
import { FormModel, Input, Icon, Checkbox, Button } from "ant-design-vue";
export default {
  name: "Login",
  components: {
    AFormModel: FormModel,
    AFormItem: FormModel.Item,
    AInput: Input,
    AIcon: Icon,
    ACheckbox: Checkbox,
    AButton: Button,
    AInputPassword: Input.Password,
  },
  data() {
    return {
      formData: {
        phone: "",
        password: "",
        remenber: false,
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号！", trigger: "change" },
          { max: 32, message: "长度不能超过32个字符！", trigger: "change" },
          {
            pattern: new RegExp("^[^\\s]*$"),
            message: "不能包含空格",
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "change" },
          { max: 100, message: "长度不能超过100个字符！", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    if(localStorage.getItem('sd') == 'a') {
      this.formData.remenber = true;
    }else {
      this.formData.remenber = false;
    }
    // 如果localStorage中存储了账号密码，sdre是随意起的名字
    if(localStorage.getItem('sdre')) {
      // console.log('aasasas')
      let user = JSON.parse(localStorage.getItem('sdre'));
      this.formData.phone = user.b;
      this.formData.password = user.a;
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.$refs.ruleForm.validate((valid) => {
        /**
         * 1、判断是否记住密码？保存localStorage:不保存localStorage
         * 2、密码进行md5加密
         * 3、手机号密码传输到后台
         * 4、提示登录结果
         * 5、登录成功之后判断是否选择了记住密码
         * 6、获取到返回的token，存储到localStorage
         * 7、转跳会原来页面
         */
        if (valid) {
          let user = new Object();
          user.phone = this.formData.phone;
          user.password = md5(this.formData.password);
          requests.login(user).then((res) => {
            // 登录成功
            if (res.code == 200) {
              // 如果选择了记住账号密码，则存到localStorage中,是否记住、账号密码的key都是随便起的名字，防止别人轻松认出，
              // 只是练习项目，不打算做进一步的敏感信息加密处理
              localStorage.setItem("sd", (this.formData.remenber)? 'a':'b');
              if (this.formData.remenber) {
                let user = {a:this.formData.password, b:this.formData.phone}
                localStorage.setItem("sdre", JSON.stringify(user));
              }else {
                localStorage.removeItem("sdre");
              }
              // 将登录后端传回来的token存到localStorage中
              localStorage.setItem("token", res.data.token);
              // 保存头像路径到sessionStorage中
              sessionStorage.setItem('avatarPath', res.data.avatarPath);
              this.$store.dispatch('setAvatarPath', res.data.avatarPath);
              this.$message.success(res.msg);
              // 转跳会原来页面
              this.$router.back();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
#login .login-form {
  max-width: 300px;
}

#login .login-form-forgot {
  float: right;
}
#login .login-form-button {
  width: 100%;
}
</style>